<!--
 * 登录页
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <page-root class="page-root" headerMode="bg-transparent hide-title" headerScrollMode="">
        <view class="app-gap-sides page-content">
            <hi-button
                class="submit-button"
                @click="handleSubmit"
                text="登录"
                loadingText="正在登录..."
                :loading="loading"
                theme="primary"
                round
                block
            ></hi-button>
        </view>
    </page-root>
</template>

<script setup>
    import { ref, computed } from "vue";
    import { onLoad, onShow, onReady, onReachBottom, onPullDownRefresh, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
    import { useUserStore } from "@/stores";
    import { apiLogin, apiGetUserInfo } from "@/services";
    import { routeToConfiguredLoginAfterPage } from "@/router";

    // stores
    const userStore = useUserStore();

    // 登录状态
    const loading = ref(false);

    // 页面滚动，不建议删除，因为 <page-root> 组件中如果需要处理滚动相关的逻辑，就需要在页面中定义，否则 <page-root> 中的 onPageScroll 生命周期不生效
    onPageScroll((e) => {});

    // 登录
    function handleSubmit() {
        console.log("登录");

        // 更新登录状态
        loading.value = true;

        // 请求接口进行登录
        apiLogin({
            data: {
                phone: "18560000860",
                company: "济南晨霜信息技术有限公司"
            }
        })
            .then((res) => {
                // 获取用户信息
                queryUserInfo();
            })
            .catch((err) => {
                // 更新登录状态
                loading.value = false;
            });
    }

    // 查询用户信息
    function queryUserInfo() {
        apiGetUserInfo({
            successTips: true,
            successText: "登录成功",
            successEndCallback: () => {
                // 页面跳转
                routeToConfiguredLoginAfterPage();
            }
        })
            .then((res) => {
                // 更新用户状态数据
                userStore.userinfo = {
                    phone: "18560000860",
                    company: "济南晨霜信息技术有限公司"
                };
            })
            .finally(() => {
                // 更新登录状态
                loading.value = false;
            });
    }
</script>

<style lang="scss" scoped>
    .page-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 100rpx 50rpx;
    }
</style>
